<template>
  <section class="highlight-page">
    <el-row :gutter="20" class="header">
      <el-col :span="24">
        <h1 class="title">🔥 精彩瞬间</h1>
        <p class="subtitle">回顾职业选手与战队的高光时刻</p>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="content">
      <el-col :span="4">
        <el-menu
          default-active="all"
          class="side-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="all">全部</el-menu-item>
          <el-menu-item index="lpl">LPL</el-menu-item>
          <el-menu-item index="lck">LCK</el-menu-item>
          <el-menu-item index="msi">MSI</el-menu-item>
          <el-menu-item index="worlds">S赛</el-menu-item>
        </el-menu>
      </el-col>

      <el-col :span="20">
        <el-row :gutter="15">
          <el-col
            v-for="(item, index) in paginatedHighlights"
            :key="index"
            :span="8"
            class="video-card-wrapper"
          >
            <el-card class="video-card" shadow="hover">
              <div class="video-container">
                <img
                  :src="item.thumbnail"
                  alt="封面"
                  class="cover"
                  @click="playVideo(index)"
                />
                <video
                  :src="item.videoUrl"
                  class="video"
                  controls
                  muted
                  loop
                  ref="videos"
                />
              </div>
              <div class="info">
                <h3 class="title">{{ item.title }}</h3>
                <p class="meta">
                  <span>📅 {{ item.date }}</span>
                  <span>📍 {{ item.location }}</span>
                </p>
                <p class="description">{{ item.description }}</p>
                <div class="stats">
                  <span>👁️ {{ item.views }} 浏览</span>
                  <span>👍 {{ item.likes }} 点赞</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-pagination
          layout="prev, pager, next"
          :total="highlights.length"
          :page-size="8"
          @current-change="handlePageChange"
        />
      </el-col>
    </el-row>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "all",
      currentPage: 1,
      pageSize: 8,
      highlights: [
        {
          id: 1,
          category: "lpl",
          title: "Faker 闪现躲伤害反打团灭",
          date: "2023-10-15",
          location: "上海LPL场馆",
          thumbnail: "https://example.com/thumb1.jpg",
          videoUrl: "https://example.com/video1.mp4",
          description: "T1 vs EDG，Faker精准预判反打完成翻盘",
          views: 12500,
          likes: 2800,
        },
        {
          id: 2,
          category: "lck",
          title: "Chovy 五杀教学局",
          date: "2023-09-30",
          location: "首尔Olympic场馆",
          thumbnail: "https://example.com/thumb2.jpg",
          videoUrl: "https://example.com/video2.mp4",
          description: "Gen.G vs KT，Chovy五杀带队获胜",
          views: 9800,
          likes: 2100,
        },
        {
          id: 3,
          category: "msi",
          title: "Xiaohu 灵魂大招开团",
          date: "2023-05-20",
          location: "柏林MSI场馆",
          thumbnail: "https://example.com/thumb3.jpg",
          videoUrl: "https://example.com/video3.mp4",
          description: "RNG vs T1，Xiaohu关键团战锁定胜局",
          views: 15000,
          likes: 3200,
        },
        {
          id: 4,
          category: "worlds",
          title: "Showmaker 六神装逆风翻盘",
          date: "2023-11-10",
          location: "伦敦S赛场馆",
          thumbnail: "https://example.com/thumb4.jpg",
          videoUrl: "https://example.com/video4.mp4",
          description: "Gen.G vs JDG，Showmaker逆风操作封神",
          views: 18000,
          likes: 4000,
        },
        {
          id: 5,
          category: "lpl",
          title: "Uzi 超远距离一箭穿心",
          date: "2023-08-12",
          location: "杭州LPL场馆",
          thumbnail: "https://example.com/thumb5.jpg",
          videoUrl: "https://example.com/video5.mp4",
          description: "EDG vs LNG，Uzi极限输出完成击杀",
          views: 11000,
          likes: 2500,
        },
        {
          id: 6,
          category: "lck",
          title: "Pyosik 开团抢大成功",
          date: "2023-10-05",
          location: "首尔LCK场馆",
          thumbnail: "https://example.com/thumb6.jpg",
          videoUrl: "https://example.com/video6.mp4",
          description: "Gen.G vs DK，Pyosik关键开团奠定胜局",
          views: 13000,
          likes: 2900,
        },
        {
          id: 7,
          category: "msi",
          title: "Ruler 超远距离一箭穿心",
          date: "2023-06-15",
          location: "柏林MSI场馆",
          thumbnail: "https://example.com/thumb7.jpg",
          videoUrl: "https://example.com/video7.mp4",
          description: "DWG vs T1，Ruler极限输出完成击杀",
          views: 14000,
          likes: 3100,
        },
        {
          id: 8,
          category: "worlds",
          title: "Oner 魔鬼操作",
          date: "2023-11-12",
          location: "伦敦S赛场馆",
          thumbnail: "https://example.com/thumb8.jpg",
          videoUrl: "https://example.com/video8.mp4",
          description: "Gen.G vs TES，Oner关键操作奠定胜局",
          views: 16000,
          likes: 3500,
        },
      ],
    };
  },
  computed: {
    filteredHighlights() {
      if (this.activeTab === "all") return this.highlights;
      return this.highlights.filter((item) => item.category === this.activeTab);
    },
    paginatedHighlights() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredHighlights.slice(start, end);
    },
  },
  methods: {
    handleMenuSelect(category) {
      this.activeTab = category;
      this.currentPage = 1;
    },
    handlePageChange(page) {
      this.currentPage = page;
    },
    playVideo(index) {
      this.$refs.videos[index].play();
    },
  },
};
</script>

<style lang="less" scoped>
.highlight-page {
  background-color: #f9f9f9;
  color: #333;
  margin-top: 20px;
  padding: 30px 15px;

  .header {
    margin-bottom: 20px;

    .title {
      font-size: 24px;
      font-weight: bold;
      color: #007bff;
    }

    .subtitle {
      font-size: 14px;
      color: #666;
      margin-top: 4px;
    }
  }

  .content {
    .side-menu {
      background-color: #fff;
      border-right: 1px solid #ddd;
      height: 80vh;
      overflow-y: auto;

      .el-menu-item {
        color: #555;
        &.is-active {
          background-color: #007bff;
          color: #fff !important;
        }
      }
    }

    .video-card-wrapper {
      margin-bottom: 15px;
    }

    .video-card {
      background-color: #fff;
      border: 1px solid #ddd;
      transition: transform 0.2s ease;

      &:hover {
        transform: scale(1.01);
      }

      .video-container {
        position: relative;
        padding-bottom: 37.5%; /* 16:9 -> 8:5 */
        height: 0;
        overflow: hidden;

        .cover {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          cursor: pointer;
          border-radius: 4px 4px 0 0;
        }

        .video {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 4px 4px 0 0;
          display: none;
        }
      }

      .info {
        padding: 10px;
        font-size: 13px;

        .title {
          font-size: 16px;
          color: #007bff;
          margin-bottom: 6px;
        }

        .meta {
          margin-bottom: 4px;
          span {
            margin-right: 8px;
          }
        }

        .description {
          color: #555;
          margin-bottom: 6px;
          height: 32px;
          overflow: hidden;
        }

        .stats {
          color: #666;
          span {
            margin-right: 8px;
          }
        }
      }
    }

    .el-pagination {
      margin-top: 20px;
      text-align: center;

      .el-pager li {
        background-color: #fff;
        color: #666;
        &.active {
          background-color: #007bff;
          color: #fff;
        }
      }
    }
  }

  @media (max-width: 768px) {
    .content {
      .side-menu {
        display: none;
      }

      .video-card-wrapper {
        .el-col {
          width: 100%;
        }
      }
    }
  }
}
</style>